<template>
  <div class="app-container pg-sowing-wall">
    <el-form ref="pageForm" class="page-form" size="small" :rules="rules" :model="pageForm" label-width="auto">
      <el-row :gutter="20">
        <el-col :span="7">
          <div class="part-title">
            <h4 class="title-name font-14">任务信息</h4>
          </div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="任务编号" prop="locationCode">
                <el-input v-model="pageForm.locationCode" placeholder="请扫描拣货任务编号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="拣货车" prop="goodsWeight">
                <el-input v-model="pageForm.goodsWeight" placeholder="请扫描拣货车号" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="part-title">
            <h4 class="title-name font-14">拣货任务清单</h4>
          </div>
          <div class="part-content">
            <el-table ref="pageTable" class="page-table border-all mt10"
              :data="tableData" :height="tableHeight" border stripe>
              <el-table-column align="center" type="index" label="序号" width="46"></el-table-column>
              <el-table-column show-overflow-tooltip prop="mainOrderNo" label="订单编号" align="center" min-width="108"></el-table-column>
              <el-table-column show-overflow-tooltip prop="orderNo" label="运单编号" align="center" min-width="108"></el-table-column>
              <el-table-column show-overflow-tooltip prop="referenceNo" label="播种编号" align="center" min-width="108"></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="17">
          <div class="part-title">
            <h4 class="title-name font-14">单号扫描</h4>
          </div>
          <!-- <el-form-item label="扫描单号" prop="locationCode">
            <el-input v-model="pageForm.locationCode" placeholder="请扫描客户订单号/一段物流单号/系统订单号" clearable></el-input>
          </el-form-item> -->
          <div class="input-row">
            <span class="input-label">扫描单号：</span>
            <el-input class="input-inner" size="small" v-model.trim="pageForm.number" placeholder="请扫描客户订单号/一段物流单号/系统订单号" @keyup.enter.native="getPageDetail()"></el-input>
          </div>
          <div class="part-title mt25">
            <h4 class="title-name font-14">任务播种墙</h4>
          </div>
          <div class="part-content">
            <div class="wall-box">
              <div class="wall-cell">
                <span class="wall-no">1</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell active">
                <span class="wall-no">2</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">3</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell active">
                <span class="wall-no">4</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">5</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">6</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell active">
                <span class="wall-no">7</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">8</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell active">
                <span class="wall-no">9</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">10</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">11</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">12</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">13</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">14</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">15</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">16</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell active">
                <span class="wall-no">17</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">18</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">19</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell">
                <span class="wall-no">20</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
              <div class="wall-cell active">
                <span class="wall-no">21</span>
                <div class="no-text">订单：78789686896878</div>
                <div class="no-text">运单：78789686896878</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import listmixin from '@/utils/list-mixin';
import { checkInteger, checkPositiveNumber } from '@/utils/validate';
import * as API_Delivery from '@/api/oms/delivery';

export default {
  name: 'pg-sowing-wall',
  dicts: ['ali_order_type', 'yes_no', 'check_weight_status'],
  mixins: [mixin, listmixin],
  data () {
    return {
      btnDisabled: true,
      pageForm: {
        number: undefined,
        locationCode: undefined,
        goodsWeight: undefined,
        isAutoPrint: 0,
        weight: '',
        length: undefined,
        width: undefined,
        height: undefined,
        volume: undefined,
        piece: undefined
      },
      rules: {
        weight: [
          { required: true, validator: checkPositiveNumber, trigger: 'blur' }
        ],
        length: [
          { required: true, validator: checkPositiveNumber, trigger: 'blur' }
        ],
        width: [
          { required: true, validator: checkPositiveNumber, trigger: 'blur' }
        ],
        height: [
          { required: true, validator: checkPositiveNumber, trigger: 'blur' }
        ],
        piece: [
          { required: true, validator: checkInteger, trigger: 'blur' }
        ]
      },
      tableData: []
    };
  },
  computed: {
    computedVolume () {
      const { length, width, height } = this.pageForm;
      return length * width * height;
    }
  },
  watch: {
    computedVolume (_newVal) {
      let _volume = undefined;
      if (!isNaN(_newVal) && !isNaN(parseFloat(Number(_newVal)))) {
        _volume = _newVal / 1000000;
      };
      this.$set(this.pageForm, 'volume', _volume);
    }
  },
  methods: {
    /**
      * @date 2025/07/30
      * @author wolfMan
      * @description {计算列表页面表格高度}
    */
    computedTableHeight () {
      this.$nextTick(() => {
        this.tableHeight = this.clientHeight - 64 - 145 - 40;
      });
    },
    /**
      * @date 2025/07/29
      * @author wolfMan
      * @description {获取详情}
    */
    getPageDetail () {
      const { number } = this.pageForm;
      API_Delivery.getDetailByNo(number).then(response => {
        const { locationCode, weight, length, width, height, piece } = response.data || {};
        this.$nextTick(() => {
          this.pageForm = {
            ...this.pageForm,
            goodsWeight: weight,
            locationCode, length, width, height, piece
          };
        });
        this.btnDisabled = false;
      });
    },
    /**
      * @date 2025/07/29
      * @author wolfMan
      * @description {确认收货}
    */
    handleSubmit () {
      this.$refs.pageForm.validate((valid) => {
        if (valid) {
          const { number, weight, length, width, height, piece } = this.pageForm;
          let _params = {
            orderNo: number,
            weight, length, width, height, piece
          };
          API_Delivery.takeDelivery(_params).then(response => {
            let _row = response.data || {};
            this.tableData.unshift(_row) ;
            this.btnDisabled = true;
            this.pageForm.number = undefined;
            this.resetForm('pageForm');
          });
        } else {
          console.log('error submit!!');
          this.$msgError('请确保输入正确的完整信息');
          return false;
        };
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pg-sowing-wall {
  padding: 20px;
  .input-row {
    display: flex;
    padding: 0 20px;
    margin: 0 -20px;
    .input-label {
      line-height: 32px;
      font-size: 18px;
      font-weight: 700;
    }
    .input-inner {
      width: 500px;
    }
    .input-btn {
      margin-left: 10px;
      width: 100px;
      font-weight: 700;
    }
  }
  .wall-box {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border: solid #dfe6ec;
    border-width: 1px 0 0 1px;
    box-sizing: border-box;
    .wall-cell {
      display: inline-block;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 18px 20px;
      margin-top: -1px;
      margin-left: -1px;
      width: calc(33.3333% + 1px);
      border: solid 1px #dfe6ec;
      box-sizing: border-box;
      .wall-no {
        display: block;
        padding-bottom: 5px;
        line-height: 34px;
        text-align: center;
        font-size: 36px;
        font-weight: 700;
      }
      .no-text {
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #999;
        font-size: 12px;
      }
      &.active {
        background: #67c23a;
        .wall-no,
        .no-text {
          color: #fff;
        }
      }
    }
  }
}
</style>